<template>
  <div>
    <div class="filter-container">
    <el-input v-model="param.drugName" placeholder="请输入药物名称" style="width: 200px;" class="filter-item"
              @keyup.enter.native="handleFilter"/>
    <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="reset">重置</el-button>
    <el-button v-waves class="filter-item" type="success"  @click="add">确定添加</el-button></div>
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;"
              @selection-change="handleDrugSelectionChange"   ref="multipleTable">
      <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
      <el-table-column label="药物名称" align="center" min-width="150px" prop="drugName" fixed></el-table-column>
      <el-table-column label="药物编号" align="center" min-width="150px" prop="drugNum"></el-table-column>
      <el-table-column label="药物价格" align="center" min-width="150px" prop="drugPrice"></el-table-column>
      <el-table-column label="药物描述" align="center" min-width="150px" prop="describes"></el-table-column>
      <el-table-column label="功能" align="center" min-width="150px" prop="drugInfo"></el-table-column>
      <el-table-column label="注意事项" align="center" min-width="150px" prop="remark"></el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="param.current" :limit.sync="param.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
import {page} from "@/api/drug";
import {tableUtil} from "@/utils/tableUtil";
import Pagination from "@/components/Pagination";
import {successM,warnM} from "@/utils/noticeUtil";

export default {
  name: "SelectDrug",
  mixins: [tableUtil],
  components: {Pagination},

  data() {
    return {
      listLoading: false,
      list: [],
      param: { // 列表查询参数
        current: 1,
        pageSize: 5,
        drugName: undefined,
      },
      selectDrugList:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() { // 表格数据分页获取
      this.listLoading = true
      page(this.param).then(res => {
        this.list = res.data.records
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleDrugSelectionChange(val) {
      this.selectDrugList = val
    },
    add(){
      let arr = this.selectDrugList
      this.selectDrugList = []
      if(!arr || arr.length <= 0) {
        warnM('尚未选择药品')
        return
      }
      this.$refs.multipleTable.clearSelection();
      this.$emit("handleDrugSelectionChange",arr)
    }
  }
}
</script>

<style scoped>

</style>
